<template>
  <div class="nav_outer">
    <Header>添加银行卡</Header>
    <div class="putarea">
      <div class="flex_bet cell">
        <span>姓名</span>
        <div class="cell_right">
          <input type="text" placeholder="请输入姓名" v-model="name" />
        </div>
      </div>
      <div class="flex_bet cell">
        <span>卡号</span>
        <div class="cell_right">
          <input type="number" placeholder="请输入卡号" v-model="cardno" />
        </div>
      </div>
      <div class="flex_bet cell" @click="choosebank">
        <span>银行</span>
        <div class="cell_right">{{ bankname }}</div>
      </div>
    </div>
    <div class="ensure_btn" @click="save">确定添加</div>
  </div>
</template>

<script>
import Header from "@/components/commonComponents/Header";
const banklist = [
  { text: "国家开发银行" },
  { text: "中国工商银行" },
  { text: "中国农业银行" },
  { text: "中国银行" },
  { text: "中国建设银行" },
  { text: "中国邮政储蓄银行" },
  { text: "交通银行" },
  { text: "招商银行" },
  { text: "上海浦东发展银行" },
  { text: "兴业银行" },
  { text: "华夏银行" },
  { text: "广东发展银行" },
  { text: "中国民生银行" },
  { text: "中信银行" },
  { text: "中国光大银行" },
  { text: "恒丰银行" },
  { text: "浙商银行" },
  { text: "渤海银行" },
  { text: "平安银行" },
  { text: "上海农村商业银行" },
  { text: "玉溪市商业银行" },
  { text: "尧都农商行" },
  { text: "北京银行" },
  { text: "上海银行" },
  { text: "江苏银行" },
  { text: "杭州银行" },
  { text: "南京银行" },
  { text: "宁波银行" },
  { text: "徽商银行" },
  { text: "长沙银行" },
  { text: "成都银行" },
  { text: "重庆银行" },
  { text: "大连银行" },
  { text: "南昌银行" },
  { text: "福建海峡银行" },
  { text: "汉口银行" },
  { text: "温州银行" },
  { text: "青岛银行" },
  { text: "台州银行" },
  { text: "嘉兴银行" },
  { text: "常熟农村商业银行" },
  { text: "南海农村信用联社" },
  { text: "常州农村信用联社" },
  { text: "内蒙古银行" },
  { text: "绍兴银行" },
  { text: "顺德农商银行" },
  { text: "吴江农商银行" },
  { text: "齐商银行" },
  { text: "贵阳市商业银行" },
  { text: "遵义市商业银行" },
  { text: "湖州市商业银行" },
  { text: "龙江银行" },
  { text: "晋城银行JCBANK" },
  { text: "浙江泰隆商业银行" },
  { text: "广东省农村信用社联合社" },
  { text: "东莞农村商业银行" },
  { text: "浙江民泰商业银行" },
  { text: "广州银行" },
  { text: "辽阳市商业银行" },
  { text: "江苏省农村信用联合社" },
  { text: "廊坊银行" },
  { text: "浙江稠州商业银行" },
  { text: "德阳商业银行" },
  { text: "晋中市商业银行" },
  { text: "苏州银行" },
  { text: "桂林银行" },
  { text: "乌鲁木齐市商业银行" },
  { text: "成都农商银行" },
  { text: "张家港农村商业银行" },
  { text: "东莞银行" },
  { text: "莱商银行" },
  { text: "北京农村商业银行" },
  { text: "天津农商银行" },
  { text: "上饶银行" },
  { text: "富滇银行" },
  { text: "重庆农村商业银行" },
  { text: "鞍山银行" },
  { text: "宁夏银行" },
  { text: "河北银行" },
  { text: "华融湘江银行" },
  { text: "自贡市商业银行" },
  { text: "云南省农村信用社" },
  { text: "吉林银行" },
  { text: "东营市商业银行" },
  { text: "昆仑银行" },
  { text: "鄂尔多斯银行" },
  { text: "邢台银行" },
  { text: "晋商银行" },
  { text: "天津银行" },
  { text: "营口银行" },
  { text: "吉林农信" },
  { text: "山东农信" },
  { text: "西安银行" },
  { text: "河北省农村信用社" },
  { text: "宁夏黄河农村商业银行" },
  { text: "贵州省农村信用社" },
  { text: "阜新银行" },
  { text: "湖北银行黄石分行" },
  { text: "浙江省农村信用社联合社" },
  { text: "新乡银行" },
  { text: "湖北银行宜昌分行" },
  { text: "乐山市商业银行" },
  { text: "江苏太仓农村商业银行" },
  { text: "驻马店银行" },
  { text: "赣州银行" },
  { text: "无锡农村商业银行" },
  { text: "广西北部湾银行" },
  { text: "广州农商银行" },
  { text: "江苏江阴农村商业银行" },
  { text: "平顶山银行" },
  { text: "泰安市商业银行" },
  { text: "南充市商业银行" },
  { text: "重庆三峡银行" },
  { text: "中山小榄村镇银行" },
  { text: "邯郸银行" },
  { text: "库尔勒市商业银行" },
  { text: "锦州银行" },
  { text: "齐鲁银行" },
  { text: "青海银行" },
  { text: "阳泉银行" },
  { text: "盛京银行" },
  { text: "抚顺银行" },
  { text: "郑州银行" },
  { text: "深圳农村商业银行" },
  { text: "潍坊银行" },
  { text: "九江银行" },
  { text: "江西省农村信用" },
  { text: "河南省农村信用" },
  { text: "甘肃省农村信用" },
  { text: "四川省农村信用" },
  { text: "广西省农村信用" },
  { text: "陕西信合" },
  { text: "武汉农村商业银行" },
  { text: "宜宾市商业银行" },
  { text: "昆山农村商业银行" },
  { text: "石嘴山银行" },
  { text: "衡水银行" },
  { text: "信阳银行" },
  { text: "鄞州银行" },
  { text: "张家口市商业银行" },
  { text: "许昌银行" },
  { text: "济宁银行" },
  { text: "开封市商业银行" },
  { text: "威海市商业银行" },
  { text: "湖北银行" },
  { text: "承德银行" },
  { text: "丹东银行" },
  { text: "金华银行" },
  { text: "朝阳银行" },
  { text: "临商银行" },
  { text: "包商银行" },
  { text: "兰州银行" },
  { text: "周口银行" },
  { text: "德州银行" },
  { text: "三门峡银行" },
  { text: "安阳银行" },
  { text: "安徽省农村信用社" },
  { text: "湖北省农村信用社" },
  { text: "湖南省农村信用社" },
  { text: "广东南粤银行" },
  { text: "洛阳银行" },
  { text: "农信银清算中心" },
  { text: "城市商业银行资金清算中心" }
];
export default {
  data() {
    return {
      name: "",
      cardno: "",
      bankname: "",
      accountId: ""
    };
  },
  created() {
    let mui = this.mui;
    this.accountId = this.$route.query.accountId;
    this.picker = new mui.PopPicker();
  },
  methods: {
    save() {
      let mui = this.mui;
      if (!this.name || !this.cardno || !this.bankname) {
        mui.toast("信息输入不全");
        return;
      }
      if(!/^([1-9]{1})(\d{11}|\d{15}|\d{16}|\d{17}|\d{18})$/.test(this.cardno)){
        mui.toast("请输入正确的银行卡号");
        return;
      }
      let postdata = {
        accountId: this.accountId,
        name: this.name,
        cardNo: this.cardno,
        bankName: this.bankname
      };
      this.Http2.jsonpost(
        "/mobile/bankcard/save",
        JSON.stringify(postdata)
      ).then(res => {
        this.$router.go(-1);
      });
    },
    choosebank() {
      let that = this;
      that.picker.setData(banklist);
      that.picker.show(function(selectItems) {
        that.bankname = selectItems[0].text;
      });
    }
  },
  components: {
    Header
  }
};
</script>

<style scoped lang="scss">
@function px2em($px) {
  @if (unitless($px)) {
    @return px2em($px + 0px);
  } @else if (unit($px) == em) {
    @return $px;
  }
  @return ($px / 75px) * 1rem;
}
.putarea {
  background: #fff;
}
.cell {
  padding: px2em(30);
  border-bottom: 1px solid #eee;
  input {
    border: 0;
    line-height: 1;
    height: 32px;
    padding: 0 10px;
    margin-bottom: 0;
    text-align: right;
    font-size: 0.9em;
    &::-webkit-input-placeholder {
      color: #666;
    }
  }
  .cell_right {
    color: #666;
  }
}
textarea {
  margin: 0 px2em(30);
  width: 80%;
  border: 0;
}
.ensure_btn {
  height: px2em(80);
  line-height: px2em(80);
  border-radius: px2em(40);
  text-align: center;
  background: #4f7df6;
  color: #fff;
  margin: px2em(30);
}
</style>
